Ejemplo de estilos casc

1. Colegio “Nueve De Octubre”
ESTILOS
CSS
Katherine Torres
3ero BI
Lcdo. Luis Sánchez

2. OBJETIVO PRIMORDIAL DE CSS
 definir un lenguaje estándar para
diseñar interfaces para internet, sin
importar el software o dispositivo que
interprete los documentos.

3.  Nombra tus atributos de acuerdo a su contenido, no su diseño
 A veces se tiende a usar nombres de clases e id’s de acuerdo al
diseño que queremos lograr:
 <div id="menu-derecha">
 <a class="link-rojo">Logout</a>
 </div>
 Si alguna vez decides modificar la hoja de estilos puedes terminar
con un div id=”menu-derecha” que se encuentre a la izquierda
o un link class=”link-rojo” de color amarillo. No muy fácil de
entender.
 Tanto HTML como sus atributos fueron pensados para estructurar
los documentos semánticamente, sin importar su diseño. Por esto
es más sensato utilizar atributos que hablen del tipo de contenidos
que contienen:
 <div id="menu-principal">
 <a class="link-logout">Logout</a>
 </div>


4.  En el modelo de cajas de IE5, el ancho final de un elemento
es el indicado en el atributo “width”. Los bordes, paddings y
márgenes se cuentan hacia dentro de la caja:
 #mi-caja {
 width: 200px;
 margin: 10px;
 border: 5px;
 }
 /*
 Para IE5, el ancho final de esta caja es 200px;
 */

 */
 Para Firefox, Opera, Safari y otros el ancho final
 es width + bordes + paddings + margins = 230px!
 */

5.  // HTML
 <div id="contenedor">
 <div id="contenido">
 Este es un contenido.
 </div>
 </div>

 // CSS
 #contenedor {
 width: 200px;
 }
 #contenido {
 margin:10px;
 padding: 5px;
 }